<template>
  <a-drawer
    v-model:visible="visible"
    class="custom-class"
    :title="formState.id ? '编辑' : '新增'"
    :mask-closable="false"
    placement="right"
    width="500px"
    @close="close"
  >
    <a-form
      ref="formRef"
      :model="formState"
      :rules="formRules"
      :label-col="{ span: 4 }"
    >
      <a-form-item label="姓名" name="name">
        <a-input v-model:value="formState.name" />
      </a-form-item>
      <a-form-item label="照片" name="image">
        <a-upload
          v-model:file-list="uploadState.fileList"
          name="files"
          list-type="picture-card"
          :show-upload-list="false"
          :action="uploadState.actionUrl"
          :headers="uploadState.headers"
          :multiple="true"
          :maxCount="3"
          :before-upload="beforeUpload"
          @change="(e) => filesChange(e, setFileValue)"
        >
          <img
            v-if="formState.image"
            :src="uploadState.viewUrl + formState.image"
            alt="骑手照片"
            class="inner-image"
          />
          <div v-else>
            <loading-outlined v-if="uploadState.loading"></loading-outlined>
            <plus-outlined v-else></plus-outlined>
            <div class="ant-upload-text">上传</div>
          </div>
        </a-upload>
      </a-form-item>
      <a-form-item label="性别" name="gender">
        <a-radio-group v-model:value="formState.gender">
          <a-radio value="1">男</a-radio>
          <a-radio value="2">女</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="年龄" name="age">
        <a-input-number v-model:value="formState.age" :min="10" :max="60" />
      </a-form-item>
      <a-form-item label="联系方式" name="mobile">
        <a-input v-model:value="formState.mobile" />
      </a-form-item>
      <a-form-item label="工作状态" name="isWork">
        <a-switch
          v-model:checked="formState.isWork"
          checked-value="1"
          un-checked-value="0"
        />
      </a-form-item>
      <a-form-item label="状态" name="status">
        <a-switch
          v-model:checked="formState.status"
          checked-value="1"
          un-checked-value="0"
        />
      </a-form-item>
      <a-form-item label="排序值" name="sortcode">
        <a-input-number v-model:value="formState.sortcode" :min="0" />
      </a-form-item>
      <a-form-item label="简介">
        <a-textarea v-model:value="formState.summary" />
      </a-form-item>
      <a-form-item label="备注">
        <a-textarea v-model:value="formState.remark" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 21, offset: 3 }">
        <a-button
          type="primary"
          @click.prevent="onSubmit"
          style="margin-right: 12px"
        >
          保存
        </a-button>
        <a-button @click="close">取消</a-button>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>
<script setup>
import { useUpload } from '@/hooks/upload'
import { add, update } from '@/api/rider'
import { ref, reactive, onMounted, watch } from 'vue'

const props = defineProps({
  visible: Boolean,
  current: Object,
})
const emit = defineEmits(['update:visible', 'update:current', 'query'])

const dictList = ref([])

const formRef = ref()
const formState = ref({
  id: '',
  name: '',
  image: '',
  gender: '0',
  age: '',
  status: '0',
  isWork: '0',
  mobile: '',
  summary: '',
  remark: '',
  sortcode: 0,
})
const formRules = reactive({
  name: [{ required: true, message: '骑手名称不能为空!' }],
  mobile: [{ required: true, message: '骑手联系方式不能为空!' }],
  status: [{ required: true, message: '骑手状态不能为空!' }],
  isWork: [{ required: true, message: '骑手工作状态不能为空!' }],
  sortcode: [{ required: true, message: '该值影响派单顺序，不能为空!' }],
})

const { uploadState, beforeUpload, filesChange } = useUpload()

const setFileValue = (res) => {
  formState.value.image = res[0].url
  formState.value.imageThumb = res[0].url_thumb
  formState.value.remark = res[0].originalName
}
const close = () => {
  emit('update:current', null)
  emit('update:visible', false)
}

const onSubmit = () => {
  formRef.value
    .validate()
    .then(async () => {
      const func = (e) => (!formState.value.id ? add(e) : update(e))
      const { data, code } = await func(formState.value)
      if (code !== 300) return
      emit('query')
      close()
    })
    .catch((err) => {
      console.log('error', err)
    })
}

onMounted(() => {})

watch(
  () => props.current,
  (e) => {
    e ? Object.assign(formState.value, props.current) : (formState.value = {})
  },
  { deep: true }
)
</script>
<style lang="less" scoped></style>
